<html>
<head>
    <meta charset="utf-8">
    <meta content="initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <title>MapView 简介 - 创建二维地图</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <!--该<link>标签引用main.css包含特定于 Esri 小部件和组件的样式的样式表。-->
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <!--该<script>标签从 CDN 加载 ArcGIS API for JavaScript。当 API 新版本发布时，更新版本号以匹配新发布的版本。-->
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        /*全局require()函数用于加载 API 的AMD模块*/
        require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
            const map = new Map({
                basemap: "topo-vector" //底图
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 4,//中心细节级别
                center: [100.3, 33.9], // 经,纬 度坐标
                scale: 30000000,  //比例尺,数字越大,看到的范围越大
                background: { //背景,底图在拖动或者放大缩小时的背景色
                    color: "red" // 设置为红色
                },
            });
        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>

</html>
